<!-- 设置 -->
<template>
    <div class="box">
        <div class="top">
            <div class="back" @click="$router.back()">
                <svgIcon iconName="icon-fanhui" font-size="40px"></svgIcon>
            </div>
            <div class="top_title">设置</div>
        </div>
        <div class="content">
            <div class="cont_item" v-for="(group, groupIndex) in list" :key="groupIndex">
                <div class="item" v-for="(item, index) in group[`item_${groupIndex + 1}`]" :key="index" :class="item.border ? 'item item_bord' : 'item'">
                    <div>
                        <svgIcon :iconName="item.iconName" font-size="40px"></svgIcon>
                        <span>{{ item.title }}</span>
                    </div>
                    <div>
                        <svgIcon iconName="icon-youjiantou" font-size="30px"></svgIcon>
                    </div>
                </div>
            </div>
            <div class="cont_item">
                <div class="item_2" style="border-bottom: 1px solid gray;">
                    切换账号
                </div>
                <div class="item_2" @click="logout">
                    退出登录
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    
    const router = useRouter()
    
    const list = ref([
        {
            "item_1": [
                {
                    "iconName": "icon-yonghu",
                    "title" : "账号与安全"
                },
                {
                    "iconName": "icon-shezhi1",
                    "title" : "通用设置"
                },
                {
                    "iconName": "icon-tongzhizhongxin",
                    "title" : "通知设置"
                },
                {
                    "iconName": "icon-yinsibaohu",
                    "title" : "隐私设置",
                    "border" : true
                },
            ]
        },
        {
            "item_2": [
                {
                    "iconName": "icon-shanchu",
                    "title" : "储存空间"
                },
                {
                    "iconName": "icon-wenjian",
                    "title" : "内容偏好调节"
                },
                {
                    "iconName": "icon-dizhi",
                    "title" : "收获地址"
                },
                {
                    "iconName": "icon-liebiao",
                    "title" : "添加小部件"
                },
                {
                    "iconName": "icon-emisan",
                    "title" : "未成年人模式",
                    "border" : true
                }
            ]
        },
        {
            "item_3": [
                {
                    "iconName": "icon-kefu",
                    "title" : "帮助与客服"
                },
                {
                    "iconName": "icon-guanyu",
                    "title" : "关于小红书",
                    "border" : true
                }
            ]
        }
    ]);
    console.log(list.value);
    
    const logout = () => {
        // 清除本地存储的user_id
        localStorage.removeItem('user_id');
        // 跳转到登录页面
        router.push('/');
    }
</script>
<style lang="less" scoped>
.box {
    width: 100%;
    // min-height: 100vh;
    background-color: #f5f5f5;
    .top {
      width: 100%;
      height: 100px;
      font-size: 32px;
      display: flex;
      align-items: center;
      background-color: #fff;
      .back {
        width: 100px;
        height: 100%;
        line-height: 100px;
        text-align: center;
      }
      .top_title {
        margin-left: 230px;
      }
    }
    .content {
        width: 100%;
        padding: 0 30px;
        .cont_item {
            width: 100%;
            margin-top: 50px;
            border-radius: 30px;
            background-color: #fff;
            .item_bord {
                border: none !important;
            }
            .item {
                width: 100%;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid gray;
                font-size: 32px;
                padding: 0 30px;
                div {
                    span {
                        margin-left: 30px;
                    }
                }
            }
            .item_2 {
                width: 100%;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                padding: 0 30px;
            }
        }
    }
}
</style>